<template>
  <div class="top-navbar">
    <ul>
      <router-link v-if="nav[1]" :to="{name: 'memberCentre', params: {no:  '1'}}"><li :class="{active:active==='1'}">
        <img src="../../img/nav-1.png" alt="">{{nav[1].name}}</li></router-link>
      <!--<router-link v-if="nav[1]" :to="{name: 'memberFile', params: {no:  '1'}}"><li :class="{active:active==='1'}">-->
        <!--<img src="../../img/nav-1.png" alt="">{{nav[1].name}}</li></router-link>-->
      <router-link v-if="nav[10]" :to="{name: 'serviceItems', params: {no:  '2'}}"><li :class="{active:active==='2'}">
        <img src="../../img/nav-10.png" alt="">{{nav[10].name}}</li></router-link>
      <router-link v-if="nav[18]" :to="{name: 'healthAssessment', params: {no:  '3'}}"><li :class="{active:active==='3'}">
        <img src="../../img/nav-18.png" alt="">{{nav[18].name}}</li></router-link>
      <router-link v-if="nav[24]" :to="{name: 'financialCenter', params: {no:  '4'}}"><li :class="{active:active==='4'}">
        <img src="../../img/nav-24.png" alt="">{{nav[24].name}}</li></router-link>
      <router-link v-if="nav[29]" :to="{name: 'business', params: {no:  '5'}}"><li :class="{active:active==='5'}">
        <img src="../../img/nav-29.png" alt="">{{nav[29].name}}</li></router-link>
      <!--<router-link v-if="nav[29]" :to="{name: 'staff', params: {no:  '5'}}"><li :class="{active:active==='5'}">-->
        <!--<img src="../../img/nav-29.png" alt="">{{nav[29].name}}</li></router-link>-->
      <router-link v-if="nav[36]" :to="{name: 'serviceCenter', params: {no:  '6'}}"><li :class="{active:active==='6'}">
        <img src="../../img/nav-36.png" alt="">{{nav[36].name}}</li></router-link>
      <!--<router-link v-if="nav[36]" :to="{name: 'visitorRecord', params: {no:  '6'}}"><li :class="{active:active==='6'}">-->
        <!--<img src="../../img/nav-36.png" alt="">{{nav[36].name}}</li></router-link>-->
      <!--<router-link :to="/app/company/member"><li>运营管理</li></router-link>-->
      <router-link :to="{name: 'applySubmit', params: {no:  '111'}}"><li :class="{active:active==='111'}">
        <img src="../../img/nav-36.png" alt="">运营补贴</li></router-link>
      <router-link :to="{name: 'MCManage', params: {no:  '112'}}"><li :class="{active:active==='112'}">
        <img src="../../img/nav-36.png" alt="">优待证管理</li></router-link>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
      return{
        active: '0',
      }
    },
  props:["nav"],
  methods: {
    init(){
      //保持导航栏处于选中状态
      if(this.$route.meta.no){
        this.active = this.$route.meta.no;
      };
    },
  },
  mounted: function () {
    this.init();
  }
  }

</script>

<style>
  @media screen and (max-width:1366px){
    .toolbar-left .toolbar-title{
      margin-right:0px!important;
    }
  }

.top-navbar ul li{
  color:#ededed;
}

.top-navbar ul a{
  display:inline-block;
}

.top-navbar .active{
    background-color: #48576a;

  }
  .top-navbar img{
    width:20px;
    height:20px;
    margin-right: 5px;
    vertical-align:text-bottom;
  }

</style>
